<template>
    <div class="app">
        <NuxtLayout name="app">
            <div class="h-full flex flex-col">
                <header
                    class="header flex flex-col justify-center items-center px-[16px]"
                    :style="{
                        'background-image': `url(${getImageUrl(
                            pageData[0]?.prop?.banner_bg
                        )})`
                    }"
                >
                    <div
                        class="font-medium text-[34px]"
                        :class="getTitleColor(pageData[0]?.prop?.title_color)"
                    >
                        {{ pageData[0]?.prop?.title }}
                    </div>
                </header>
                <div class="flex-1 min-h-0">
                    <ElScrollbar>
                        <div class="mian flex flex-wrap mt-[20px]">
                            <NuxtLink
                                v-for="item in showList"
                                :key="item.pcLink.path"
                                :to="getLink(item.pcLink)"
                                class="pb-[20px]"
                                :target="
                                    typeof getLink(item.pcLink) == 'string'
                                        ? '_blank'
                                        : '_self'
                                "
                            >
                                <div class="menu-item text-center h-full">
                                    <ElImage
                                        :src="getImageUrl(item.image)"
                                        fil="fill"
                                        class="w-full h-[240px] rounded-[16px]"
                                    ></ElImage>
                                    <div
                                        class="mt-[16px] font-medium text-[18px]"
                                    >
                                        {{ item.title }}
                                    </div>
                                    <div
                                        class="mt-[12px] text-sm text-[#999999] line-clamp-2"
                                    >
                                        {{ item.desc }}
                                    </div>
                                </div>
                            </NuxtLink>
                        </div>
                    </ElScrollbar>
                </div>
            </div>
        </NuxtLayout>
    </div>
</template>
<script setup lang="ts">
import { getdecorate } from '~/api'
import { useAppStore } from '~~/stores/app'
const { getImageUrl } = useAppStore()
definePageMeta({
    layout: false
})

const decorate = ref([])

const { data: pages } = await useAsyncData(() => getdecorate({ id: 14 }))

const pageData = computed(() => {
    try {
        return JSON.parse(pages.value.data)
    } catch (error) {
        console.error(error)
        return []
    }
})

const getTitleColor = computed(() => {
    return (type: number) => {
        switch (type) {
            case 1:
                return 'text-black'
            case 2:
                return 'text-white'
            case 3:
                return 'text-primary'
        }
    }
})

const getData = async () => {
    const data = await getdecorate({ id: 7 })
    decorate.value = JSON.parse(data.data)
}
const showList = computed(() => {
    return (
        decorate?.value[0]?.content.data.filter(
            (item: any) => item.is_show == 1
        ) || []
    )
})
const getLink = (item: any) => {
    if (item?.type == 'custom') {
        return item?.query?.url
    } else {
        return {
            path: item?.path,
            query: item?.query
        }
    }
}
getData()
</script>
<style lang="scss" scoped>
.header {
    height: 200px;
    border-radius: 15px;
    background-size: 100% auto;
    background-repeat: no-repeat;
}
.menu-item {
    margin-right: 25px;
    padding: 20px;
    width: 280px;
    border-radius: 15px;
    background-color: #ffffff;
    box-shadow: 0 3px 10px var(--el-color-primary-light-9);
}
</style>
